import React, { PureComponent } from 'react';

// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website'
// 引入框架
import { message, Button } from 'antd';
// 引入样式
import './HotComments.scss';
// 引入点击复制到粘贴板的办法
import copy from 'copy-to-clipboard';
export default class HotComments extends PureComponent {
  constructor() {
    super()
    this.state = {
      user: {
        picurl: 'https://s4.music.126.net/style/web2/img/default/default_album.jpg',
        name: '',
        artistsname: '',
        content: '',
        httpMusci: '',
        // 开启关闭音乐
        isAudio: false
      }
    }
  }
  // 清除订阅者
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  componentDidMount () {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/HotComments").then(err => {
      if (err.data.code === "W0001") {
        this.setState({
          user: err.data.user.data
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }
  // 首页文字点击
  BtnCopy = (listWord) => {
    if (copy(listWord)) {
      message.success({ content: '网易云热评复制成功', className: 'bulletChatMessage' });
    } else {
      message.error({ content: '您的设备不支持自动复制', className: 'bulletChatMessage' });
    }
  }
  // 重新获取一条评论
  onUpdate = () => {
    // 暂停音乐
    this.falseAudio()
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/HotComments").then(err => {
      if (err.data.code === "W0001") {
        this.setState({
          user: err.data.user.data
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }
  // 开启音乐的函数
  trueAudio = (url) => {
    let audio = document.getElementById('HotCommentsAudioHome');
    this.setState({
      httpMusci: url,
      isAudio: true
    }, () => {
      audio.play().catch(() => {
        message.info({ content: '网络较差', className: 'bulletChatMessage' })
      })
    })
  }
  // 关闭音乐
  falseAudio = () => {
    let audio = document.getElementById('HotCommentsAudioHome');
    this.setState({
      isAudio: false
    }, () => {
      audio.pause()
    })
  }
  render () {
    let { user, httpMusci, isAudio } = this.state;
    return (
      <div className='HotComments'>
        <div className='HotComments_top'>
          <div className='HotComments_top_img'>
            <img src={user.picurl} alt="专辑封面" />
          </div>
          <div className='HotComments_top_body'>
            <p>{user.name}</p>
            <p>{user.artistsname}</p>
            <div className='HotComments_top_Button'>
              {
                isAudio ? <Button onClick={this.falseAudio}>暂停</Button> : <Button onClick={() => this.trueAudio(user.url)}>试听</Button>
              }
              <Button onClick={this.onUpdate}>再来一个</Button>
            </div>
          </div>
        </div>
        <div className='HotCommentsBody' onClick={() => this.BtnCopy(user.content)}>
          {user.content}
        </div>
        {/* 音乐播放器 */}
        <audio src={httpMusci} controls="controls" style={{ display: 'none' }} id='HotCommentsAudioHome'>
        </audio>
      </div>
    )
  }
}